import React from "react";
// 引入Tabber组件
import Tabber from "@/components/Tabber"

const Index = () => {
    // 获得cookie
    // const business =  React.Cookie.load("business") ?? {}
    const business =  React.Business

    const loginOut = () => {
        React.UI.Dialog.confirm({
            content: '确定要退出吗？',
            onConfirm: () => {
                React.success("退出成功", () => {
                    // 请求cookie
                    React.Cookie.remove("business",{ path: '/' })
                    React.navigate("/business/login")
                })
            },
        })
    }
    return (
        <>
            {/*引入样式*/}
            <link rel="stylesheet" href="/assets/css/user.css" />
            <div className="top">
                <div>个人中心</div>
            </div>
            {/*头部*/}
            <div className="header">
                <div className="userinfo">
                    <div className="avatar">
                        <img src={business.avatar_text ?? "/assets/images/avatar.png"} alt="" />
                    </div>
                    <div className="nickname">{business.nickname ?? "admin"}</div>
                    {/* <div className="nickname content">这家伙很懒，什么也没写！</div> */}
                </div>
                <div className="corrugated">
                    <div className="wave-top wave-item"></div>
                    <div className="wave-middle wave-item"></div>
                    <div className="wave-bottom wave-item"></div>
                </div>
            </div>
            <div className="menu-center">
                <div className="item">
                    <div>1</div>
                    <div className="text">支付</div>
                </div>
                <div className="item">
                    <div>10</div>
                    <div className="text">待支付</div>
                </div>
                <div className="item">
                    <div>7</div>
                    <div className="text">待评论</div>
                </div>
            </div>
            <div className="menu-cell">
                <div className="item">
                    <React.Router.Link to={'/business/order'}>
                        <div className="title">房间订单</div>
                        <div className="icon">
                            <img src="/assets/images/right.png" alt="" />
                        </div>
                    </React.Router.Link>
                </div>
                <div className="item">
                    <React.Router.Link to={"/business/profile"}>
                        <div className="title">个人资料</div>
                        <div className="icon">
                            <img src="/assets/images/right.png" alt="" />
                        </div>
                    </React.Router.Link>
                </div>
                {
                    business.auth=="0" ? (
                        <div className="item">
                            <React.Router.Link to={"/business/emailAuth"}>
                                <div className="title">邮箱认证</div>
                                <div className="icon">
                                    <img src="/assets/images/right.png" alt="" />
                                </div>
                            </React.Router.Link>
                        </div>
                    ) : ""
                }
                <div className="item">
                    <React.Router.Link to={"/business/household"}>
                        <div className="title">住客信息</div>
                        <div className="icon">
                            <img src="/assets/images/right.png" alt="" />
                        </div>
                    </React.Router.Link>
                </div>
                <div className="item">
                    <React.Router.Link to={"/business/guest"}>
                        <div className="title">住客信息登记</div>
                        <div className="icon">
                            <img src="/assets/images/right.png" alt="" />
                        </div>
                    </React.Router.Link>
                </div>
                <div className="item">
                    <React.Router.Link to={"/business/coupon"}>
                        <div className="title">我的优惠券</div>
                        <div className="icon">
                            <img src="/assets/images/right.png" alt="" />
                        </div>
                    </React.Router.Link>
                </div>
                <div className="item">
                    <React.Router.Link to={"/business/contact"}>
                        <div className="title">关于我们</div>
                        <div className="icon">
                            <img src="/assets/images/right.png" alt="" />
                        </div>
                    </React.Router.Link>
                </div>
                <div className="item">
                    <a onClick={loginOut}>
                        <div className="title">退出登录</div>
                        <div className="icon">
                            <img src="/assets/images/right.png" alt="" />
                        </div>
                    </a>
                </div>
            </div>

            <Tabber />
        </>
    )
}

export default Index